<template>


    <div>
        <el-table
                :data="tableData"
                style="width: 100%">

            <el-table-column
                    prop="id"
                    label="编号"
            >
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="密码">
            </el-table-column>
            <el-table-column
                    prop="realname"
                    label="真实姓名">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button @click="update(scope.row)" type="warning">修改</el-button>
                    <el-button type="danger" @click="deleteById(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <el-button type="primary" @click="add()">添加用户</el-button>
        <!--添加-->
        <el-dialog
                title="添加"
                :visible.sync="dialogVisible"
                width="80%"
                :before-close="handleClose">
            <el-form label-width="80px" :model="addForm" >

                <el-form-item label="姓名" prop="username">
                    <el-input
                            v-model="addForm.username"
                            type="textarea"
                    ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                            v-model="addForm.password"
                            type="textarea"
                    ></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" prop="realname">
                    <el-input
                            v-model="addForm.realname"
                            type="textarea"
                    ></el-input>
                </el-form-item>
            </el-form>
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser()">确 定</el-button>

        </el-dialog>

        <!--修改-->
        <el-dialog
                title="修改"
                :visible.sync="updatedialogVisible"
                width="80%"
                :before-close="handleClose">
            <el-form label-width="80px" :model="editForm" >

                <el-form-item label="姓名" prop="username">
                    <el-input
                            v-model="editForm.username"
                            type="textarea"
                    ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                            v-model="editForm.password"
                            type="textarea"
                    ></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" prop="realname">
                    <el-input
                            v-model="editForm.realname"
                            type="textarea"
                    ></el-input>
                </el-form-item>
            </el-form>
            <el-button @click="updatedialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureUpdate()">确 定</el-button>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        name: "Doctor",
        data(){
            return{
                tableData:[],
                currentPage:1,
                pageSize:5,
                total:0,
                dialogVisible:false,
                updatedialogVisible:false,
                editForm:{},
                addForm:{},
            }
        },
        created() {
            this.initTable()
        },
        methods:{
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },
            initTable(){
                this.$http.get("http://localhost:7878/user/list?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(result=>{
                    if (result.data.code == 200) {
                        this.tableData = result.data.data.records;
                        this.total=result.data.data.total;
                        this.$message.success("查询成功")
                    }else if(result.data.code===500){
                        this.$message.error("没有登录")
                        this.$router.push("/")
                    }
                })
            },
            add(){
                this.dialogVisible=true;
            },
            addUser(){
                this.$http.post("http://localhost:7878/user/add",this.addForm).then(result=>{
                    if (result.data.code==200){
                        this.$message.success("添加成功");
                        this.dialogVisible=false
                        this.initTable();
                    }
                    this.addForm={};
                })
            },
            update(row){
                this.updatedialogVisible=true;
                this.editForm=row
            },
            sureUpdate(){
                this.$http.put("http://localhost:7878/user/update",this.editForm).then(result=>{
                    if (result.data.code==200){
                        this.$message.success("修改成功");
                        this.updatedialogVisible=false;
                        this.initTable();
                    }
                })
            },
            deleteById(id){
                this.$http.delete("http://localhost:7878/user/delete?id="+id).then(result=>{
                    if (result.data.code==200){
                        this.$message.success("删除成功");
                        this.initTable();
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>